<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
	.tab{
		width: 600px;
		margin: 10px auto;
/*		background: pink;*/

	}
	.title span{
		float: left;
		width: 200px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border: 1px solid #000;
		box-sizing:border-box;
	}
	.title .active{
		background: orange;
		color: #fff;
	}
	.content p{
		width: 600px;
		height: 200px;
		line-height: 200px;
		text-align: center;
		border: 1px solid #000;
		box-sizing:border-box;
		display: none;
	}
	.content .select{
		display: block;
	}
	</style>
</head>
<body>
	<div class="tab">
		<div class="title">
			<span class="active">标题一</span>
			<span>标题二</span>
			<span>标题三</span>
		</div>
		<div class="content">
			<p class="select">内容1</p>
			<p>内容2</p>
			<p>内容3</p>
		</div>
	</div>
    <script type="text/javascript">
    	// 获取标签span
    	var spans = document.querySelectorAll("span")
    	var ps = document.querySelectorAll("p")
        
    	for (let i = 0; i < spans.length; i++) {
    		// 给每一个sapn标签添加一个点击事件
    		spans[i].onclick = function(){
    			// 先获取到原来有active类名的给他清空
    			document.querySelector(".active").className = ''
    			document.querySelector(".select").className = ''

    			this.className = 'active'
    			ps[i].className = 'select'
    		}
    	}
    </script>											  
</body>
</html>